<template>
  <div>
    <div class="welcome-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="background-color: #d3dbeb">
          <div style="padding: 18px 20px">工点管理</div>
        </div>
        <el-input v-model="filterText" placeholder="请输入关键字" clearable style="width: 360px; margin: 0 20px 20px 0">
          <el-button slot="append" icon="el-icon-search" />
        </el-input>
        <el-button type="danger" icon="el-icon-folder" title="新增顶级" circle @click="addTop" />
        <el-button type="success" icon="el-icon-plus" title="新增" circle @click="append" />
        <el-button type="primary" icon="el-icon-edit" title="编辑" circle @click="edit" />
        <el-button type="danger" icon="el-icon-delete" title="删除" circle @click="remove" />
        <div>
          <el-tag type="danger" style="width: 540px; margin-bottom: 20px"> 灰色为不可见</el-tag>
        </div>
        <el-tree
          ref="tree"
          node-key="id"
          show-checkbox
          :check-strictly="true"
          :check-on-click-node="true"
          :data="treeData"
          :props="{ children: 'childMenus', label: 'name' }"
          default-expand-all
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          @check-change="handleCheckChange"
        >
          <!-- <span slot-scope="{ node, data }" class="custom-tree-node">
            <el-input v-model="data.name" clearable />
            <span style="display: flex">
              <el-button v-if="data.id !== 1" type="success" size="mini" @click="() => save(data)">保存名称</el-button>
              <el-button v-if="data.id !== 1" type="danger" size="mini" @click="() => remove(data)">删除</el-button>
              <el-button type="primary" size="mini" @click="() => append(node, data)">添加子节点</el-button>
              <el-checkbox v-if="data.parentId" v-model="data.isVisable" style="margin-left: 10px" @change="checkedChangeHandle(data)">启用</el-checkbox>
              <div v-else style="width: 52px; height: 30px; margin-left: 10px" />
            </span>
          </span> -->

          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span :class="data.isVisable ? '' : 'invisable'">{{ data.name }}</span>
          </span>
        </el-tree>
      </el-card>
    </div>
    <addWorkpoint ref="addWorkpoint" @getList="MenuAll" />
  </div>
</template>

<script>
import { Menu, MenuAll } from '@/api/Menu'
import addWorkpoint from '@/views/workPoint/components/addWorkpoint'
export default {
  name: 'WorkPoint',
  components: {
    addWorkpoint
  },
  data() {
    return {
      checkedItem: {},
      filterText: '',
      treeData: [],
      expanded: [1]
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.MenuAll()
  },
  methods: {
    handleCheckChange(data, checked) {
      if (checked) {
        console.log(3425)
        this.checkedItem = data
        this.$refs.tree.setCheckedKeys([data.id], true)
      }
    },
    checkedChangeHandle(data) {
      Menu({ parentId: data.parentId, name: data.name, isVisable: data.isVisable }, 'put', data.id)
        .then(() => {
          this.$message.success('保存成功！')
          // this.expanded = [data.parentId]
          this.MenuAll()
        })
        .catch(() => {
          this.$message.error('保存失败！')
        })
    },
    async MenuAll() {
      const res = await MenuAll({ menuId: 1 })
      this.treeData = JSON.parse(JSON.stringify(res.data))
      this.$refs.tree.setCheckedKeys([])
      if (this.checkedItem) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([this.checkedItem.id], true)
        })
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    append() {
      var data = this.checkedItem
      if (data.id === undefined) {
        this.$message.error('请先选择父工点')
        return
      }
      this.$refs['addWorkpoint'].open(data)
    },
    async addTop() {
      const { data } = await MenuAll({ parentId: 1 })
      this.$refs['addWorkpoint'].open(data[0])
    },
    edit() {
      var data = this.checkedItem
      if (data.id === undefined) {
        this.$message.error('请选择要编辑的工点')
        return
      }
      this.$refs['addWorkpoint'].open(data, true)
    },
    save(data) {
      Menu({ parentId: data.parentId, name: data.name }, 'put', data.id)
        .then(() => {
          this.$message.success('保存成功！')
          this.expanded = [data.parentId]
          // this.MenuAll()
        })
        .catch(() => {
          this.$message.error('保存失败！')
        })
    },
    remove() {
      var data = this.checkedItem
      if (data.id === undefined) {
        this.$message.error('请先选择要删除的项')
        return
      }
      this.$confirm(`此操作将永久删除${data.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          Menu({}, 'delete', data.id)
            .then(() => {
              this.$message.success('删除成功！')
              this.expanded = [data.parentId]
              this.MenuAll()
              this.checkedItem = {}
            })
            .catch(() => {
              this.$message.error('删除失败！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      if (dropType === 'inner') {
        this.$message({
          type: 'info',
          message: '请勿跨级拖拽排序'
        })
        this.MenuAll()
        return
      }
      const parentId = dropType === 'inner' ? dropNode.data.id : dropNode.data.parentId
      const sort = dropNode.parent.childNodes.findIndex((item) => item.key === draggingNode.data.id)
      Menu(
        {
          name: draggingNode.data.name,
          parentId: parentId,
          sort: sort + 1,
          isVisable: draggingNode.data.isVisable
        },
        'put',
        draggingNode.data.id
      )
        .then(() => {
          this.expanded = [draggingNode.data.parentId]
          this.MenuAll()
        })
        .catch(() => {
          this.$message.error('排序失败！')
        })
    },
    allowDrop(draggingNode, dropNode, type) {
      return dropNode.data.id !== 1 || type === 'inner'
    },
    allowDrag(draggingNode) {
      return draggingNode.data.id !== 1
    },
    handleCurrentChange(val) {
      this.getList()
    },
    handleSizeChange(val) {
      this.getList()
    },
    formSubmit() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .invisable {
    color: #ccc;
  }
  .box-card {
    ::v-deep.el-card__header {
      padding: 0px;
    }
  }
  #app .sidebar-container {
    position: relative;
    height: 700px;
    width: 100% !important;
    margin-top: 20px;
    padding-top: 0;
    background-color: initial;
  }

  .welcome-container {
    .title {
      font-size: 20px;
      margin-bottom: 20px;
    }

    .el-tree {
      width: 800px;

      ::v-deep .el-tree-node__content {
        height: 30px;
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        > .el-input {
          width: 300px;
        }
      }
    }
  }
</style>
